<template>
  <div class="dismissTeam">
    <p class="title" v-if="!isRemoveAllTeam || isRemoveAllTeam === undefined">须达到以下条件方可解散团队</p>
    <div class="team_tip_div" v-if="!isRemoveAllTeam || isRemoveAllTeam === undefined">
      <p class="team_tip_div_text">
        <i v-if="isRemoveAllTeam1" class="el-icon-circle-check" style="color:#24BEBE"></i>
        <i v-else class="el-icon-circle-close" style="color:#E9716A"></i>
        <span>近14天无创建或正在投放的广告系列</span>
      </p>
       <p class="team_tip_div_text">
        <i v-if="isRemoveAllTeam2" class="el-icon-circle-check" style="color:#24BEBE"></i>
        <i v-else class="el-icon-circle-close" style="color:#E9716A"></i>
        <span>财务中心-可用余额，冻结余额，预付税费均为0</span>
      </p>
    </div>
    <el-form :model="ruleForm" label-position="top" :rules="rules" ref="ruleForm" label-width="100px" :style="!isRemoveAllTeam || isRemoveAllTeam === undefined ? 'margin-top: 30px;':'margin-top: -5px;'">
      <el-form-item label="手机" v-if="isShow || isRemoveAllTeam">
        <span style="position: relative;top: -12px">{{userInfo.mobile}}</span>
      </el-form-item>
      <el-form-item label="手机验证码" prop="code" v-if="isShow || isRemoveAllTeam" style="position: relative;top: -22px">
        <el-input v-model="ruleForm.code" placeholder="输入验证码" size="small" style="width: 150px;"></el-input>
        <el-button type="success" size="small" style="margin-left:10px;" :disabled="disableCode" @click="getCode">{{buttonTex}}</el-button>
      </el-form-item>
      <el-form-item label="移交至" prop="manager" v-if="isRemoveAllTeam" style="position: relative;top: -22px">
        <el-select v-model="value" placeholder="请选择" size="small" style="width: 150px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
      </el-select>
      </el-form-item>
    </el-form>
    <div class="bottom_xt"></div>
     <div class="footer_button">
        <el-button  v-if="isShow || isRemoveAllTeam" size="small" class="cancel-btn" @click="close">取 消</el-button>
        <el-button v-if="isShow || isRemoveAllTeam"  size="small" type="success" @click="removeAllTeamSure('ruleForm')">确定</el-button>
         <el-button v-else  size="small" type="success" @click="close" style="margin-top:10px;">取消</el-button>
    </div>
  </div>
</template>

<script>
import {
  smsRegister
} from '@/api/user.js'
import{removeAllTeam,transferTeam} from '@/api/team.js'
export default {
  props: {
    isRemoveAllTeam1: Boolean,
    isRemoveAllTeam2: Boolean,
    isRemoveAllTeam: Boolean,
    lowerUserList: Array
  },
  data() {
    const codeVail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入验证码'))
      } else {
        callback()
      }
    };
    const managerVail = (rule, value, callback) => {
      if (!this.value) {
        return callback(new Error('请填写移交人'))
      } else {
        callback()
      }
    };
    return {
      options: [],
        value: '',
        disableCode: false,
        ruleForm: {
          code: '',
        },
        buttonTex: '获取验证码',
        timeYz: 60,
        rules: {
          code: [
            {validator: codeVail, trigger: 'blur'}
          ],
          manager: [
            {validator: managerVail, trigger: 'blur'}
          ]
        }
    }
  },
  mounted() {
    this.ruleForm = {}
    this.value = ''
    if(this.lowerUserList) {
      let newList = this.lowerUserList
      newList.forEach((item,i) => {
        if (item.roleName !== 'visitor' && item.mobile){
          let data = {
          value: '',
          label: ''
        }
        data.value = [item.id, item.userId, item.mobile],
        data.label = item.nickName ? item.nickName : '-'
        this.options.push(data)
        }
      })
    }
  },
  computed: {
    isShow() {
      if (this.isRemoveAllTeam1 && this.isRemoveAllTeam2) return true
      else return false
    },
    userInfo() {
      return this.$store.state.user.userInfo
    },
    teamId(){
      return this.$store.state.team.teamId
    }
  },
  methods: {
    // 取消操作传值
    close(){
      this.$emit('close', false)
    },
   getCode() {
    this.getOneCode()
     this.buttonTex = this.timeYz + 's'
     this.disableCode = true
     let auth_timer = setInterval(()=> {
       this.timeYz --
       this.buttonTex = this.timeYz + 's'
        if(this.timeYz <= 0) {
         this.timeYz = 60
          this.disableCode = false
         this.buttonTex = '获取验证码'
         clearInterval(auth_timer)
       }
     }, 1000)
    },
    async getOneCode () {
       let data = {
        type: 'retrieve',
        account: this.userInfo.mobile
      }
      const res = await smsRegister(data)
      if(res.data.code === 20000) {
        this.$message.success(res.data.message)
      } else {
        this.$message.error(res.data.message)
      }
    },
    removeAllTeamSure(formName) {
      this.$refs[formName].validate(async valid => {
        if(valid) {
          if (this.lowerUserList) {
            this.transferTeam()
          } else {
            this.removeTeam()
          }
         }
       })
    },
    // 解散团队
    async removeTeam() {
      let data = {
        teamId: this.teamId,
        code: this.ruleForm.code,
        currencyType: this.$store.state.user.unit
      }
      const res = await removeAllTeam(data)
      if (res.data.code === 20000) {
        this.$message.success(res.data.message)
        this.goOverView()
      } else {
        this.$message.error(res.data.message)
      }
    },
    // 移交管理员
    async transferTeam() {
      if (!this.value[2]) {
        this.$message.error('该成员未绑定手机号，请先绑定手机号再移交')
        this.$emit('close', false)
      } else {
        let data = {
          teamId: this.$store.state.team.teamId,
          code: this.ruleForm.code,
          id: this.value[0],
          userId: this.value[1]
        }
        const res = await transferTeam(data)
        if (res.data.code === 20000) {
          this.$message.success(res.data.message)
          this.goOverView()
        } else {
          this.$message.error(res.data.message)
          this.$emit('close', false)
        }
      }
    },
    // 路由跳转
    goOverView() {
      this.$emit('close', false)
      this.ruleForm.code = ''
      this.value = ''
      window.localStorage.setItem('team-data', '')
      window.localStorage.setItem('team-data', 'visitor')
      this.$store.commit('team/SET_TEAMDATA', '')
      this.$store.commit('team/SET_TEAMID', '')
    }
  }
}
</script>

<style scoped lang="scss">
.title_label_top{
  position: relative;
  margin-top: -20px;
}
.bottom_xt {
  height: 1px;
  width: 0px;
  width: 600px;
  border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
  position:absolute;
  margin-top: 12px;
  left: 0;
}
.footer_button{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-bottom:-5px;
  margin-top: 52px;
  // position: absolute;
  right: 0;
}
.title{
  color: rgba(51, 64, 74, 0.8);
  font-family: "PingFangSC-Medium", PingFangSC, sans-serif !important;
  font-size: 14px;
  margin-top: -5px;
}
.team_tip_div {
  border: 1px solid #D9D9D9;
  border: 1px solid #D9D9D9;
  background: rgba(57, 68, 78, 0.04);
  padding: 2px 12px;
  border-radius: 4px;
  margin-top: 10px;
  .team_tip_div_text{
    color: rgba(51, 64, 74, 0.8);
    font-size: 12px;
    line-height: 14px;
    margin: 10px 0;
  }
  span{
    margin-left: 10px;
  }
}
.title_label_flex{
  margin-top: -10px;
}
.title_label {
  margin: 20px 0;
  color: rgba(51, 64, 74, 0.8);
  font-family: "PingFangSC-Medium", PingFangSC, sans-serif !important;
  font-size: 14px;
}
</style>
